<template>
  <div class="login">
    <!-- 导航栏 -->
    <van-nav-bar id="page-nav-bar" title="登录">
        <van-icon slot="left" name="arrow-left" @click="$router.go(-1)"></van-icon>
    </van-nav-bar>
    <!-- 登录表单 -->
    <van-form @submit="onSubmit" class="login-form" ref="loginRef">
      <van-field class="login-form-field"  v-model="user.mobile" name="mobile" placeholder="请输入手机号" :rules="userFromRules.mobile" type="number" maxlength="11">
        <i slot="left-icon" class="iconfont icon-shouji"></i>
      </van-field>
      <van-field  class="login-form-field" v-model="user.code" name="code" placeholder="请输入验证码" :rules="userFromRules.code" type="number" maxlength="6">
        <i slot="left-icon" class="iconfont icon-yanzhengma"></i>
        <template #button>
          <van-button
            class="send-sms-btn"
            round
            plain
            size="small"
            type="default"
            @click="getCode"
            ref="codeRef"
            native-type="button"
            >获取验证码</van-button
          >
        </template>
      </van-field>
      <div class="login-btn-wrap">
        <van-button class="login-btn" block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { login, sedCode } from '@/api/user'
export default {
  data () {
    return {
      // 用户登录信息
      user: {
        mobile: '18567856789',
        code: '246810'
      },
      // 用户登录验证信息
      userFromRules: {
        mobile: [{ required: true, message: '手机号不能为空' }, {
          pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
          message: '手机号格式错误'
        }],
        code: [{ required: true, message: '验证码不能为空' }, {
          pattern: /^\d{6}$/,
          message: '验证码格式错误'
        }]
      }
    }
  },
  methods: {
    // 登录 1.登录中 登录成功 登录失败的 toast; 2.登录接口; 3.token 处理
    async onSubmit () {
      const user = this.user
      this.$toast.loading({
        message: '登录中...',
        forbidClick: true,
        duration: 0 // 持续展示时间 0 为一直展示
      })
      try {
        const { data: res } = await login(user)
        // console.log(res)
        this.$store.commit('setUser', res.data)
        this.$toast.success('登录成功')
        this.$router.push('/mine')
      } catch (err) {
        if (err.response.status === 400) {
          this.$toast.fail('手机号或验证码错误')
          // console.log('')
        } else {
          this.$toast.fail('登录失败，请稍后重试', err)
        }
      }
    },
    // 获取验证码 1.校验手机号；2.按钮禁用；3.接口获取验证码；4.文本倒计时；
    async getCode () {
      // 手机号校验
      try {
        await this.$refs.loginRef.validate('mobile')
      } catch (err) {
        return console.log('验证失败', err)
      }
      console.log('验证通过')
      // 按钮禁用
      this.$refs.codeRef.disabled = true
      // 接口获取验证码
      const mobile = this.user.mobile
      try {
        const { data: res } = await sedCode(mobile)
        console.log('发送成功', res)
      } catch (err) {
        if (err.response.status === 429) {
          return this.$toast('操作频繁，请稍后重新获取验证码')
        } else {
          return this.$toast.fail('发送失败,请重新获取验证码')
        }
      }
      // let times = 60
      let times = 5
      const that = this
      const timer = setInterval(() => {
        if (times <= 0) {
          clearInterval(timer)
          that.$refs.codeRef.innerText = '获取验证码'
          that.$refs.codeRef.disabled = false
          return
        }
        times--
        that.$refs.codeRef.innerText = `${times}秒后重发`
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  /deep/ .van-hairline--bottom::after  {
    border: none;
  }
  .login-form {
    margin: 500px 30px 0;

    .login-form-field {
      box-shadow: 10px 10px 10px #ccc;
    }
    .iconfont {
    font-size: 37px;
    }
    .send-sms-btn {
        width: 152px;
        height: 46px;
        line-height: 46px;
        font-size: 22px;
        color: #666;
        background-color: #ededed;
    }
    .login-btn-wrap {
      padding: 53px 33px;
      .login-btn {
        border: none;
        border-radius: 10px;
        background-color: teal;
      }
    }
  }
}
</style>
